<template>
	<el-dialog title="编辑奖品" v-model="dialogVisible" width="600px" :close-on-click-modal="false"
		:before-close="dialogFormVisible" :close-on-press-escape="false">
		<el-form size="small" ref="form" :model="form">
			<el-form-item label="奖品" :label-width="formLabelWidth" :rules="[{ required: true, message: '' }]"
				prop="name">
				<el-radio-group v-model="form.type" @change="changeType">
					<el-radio :label="0">未中奖</el-radio>
					<el-radio :label="1">优惠券</el-radio>
					<el-radio :label="3">商品</el-radio>
					<el-radio :label="2">积分</el-radio>
					<el-radio :label="4">余额</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if="form.type == 3" label="商品价格" :label-width="formLabelWidth"
				:rules="[{ required: true, message: '请填写商品价格' }]" prop="product_price">
				<el-input v-model="form.product_price"></el-input>
			</el-form-item>
			<el-form-item v-if="form.type == 1" label="优惠券" :label-width="formLabelWidth"
				:rules="[{ required: true, message: '请选择优惠券' }]" prop="award_id">
				<div class="d-s-c">
					<el-button type="primary" @click="open_add = true" size="small">选择优惠券</el-button>
					<el-icon color="#67c23a" size="18" v-if="form.award_id">
						<CircleCheckFilled />
					</el-icon>
				</div>
			</el-form-item>
			<el-form-item v-if="form.type == 2" label="积分" :label-width="formLabelWidth"
				:rules="[{ required: true, message: '请输入积分' }]" prop="points">
				<el-input v-model="form.points" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item v-if="form.type == 4" label="余额" :label-width="formLabelWidth"
				:rules="[{ required: true, message: '请输入余额' }]" prop="balance">
				<el-input v-model="form.balance" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="奖品名称" :label-width="formLabelWidth" :rules="[{ required: true, message: '请输入奖品名称' }]"
				prop="name">
				<el-input v-model="form.name" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="奖品图片：" :label-width="formLabelWidth" :rules="[{ required: true, message: '请上传奖品图片' }]"
				prop="image">
				<div class="draggable-list">
					<div class="item" v-if="form.image">
						<img v-img-url="form.image" />
						<a href="javascript:void(0);" class="delete-btn" @click.stop="deleteImg(index)">
							<el-icon>
								<CloseBold />
							</el-icon>
						</a>
					</div>
					<div v-else class="item img-select" @click="openUpload()">
						<el-icon>
							<Plus />
						</el-icon>
					</div>
				</div>
				<div class="gray9">建议上传尺寸相同的图片，建议尺寸比例为1:1</div>
			</el-form-item>
			<el-form-item label="奖品数量" :label-width="formLabelWidth" :rules="[{ required: true, message: '请输入奖品数量' }]"
				prop="stock">
				<el-input v-model="form.stock" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="奖品权重" :label-width="formLabelWidth" :rules="[{ required: true, message: '请输入奖品权重' }]"
				prop="weight">
				<el-input type="number" @input="openWeight" min="0" max="100" v-model="form.weight"
					class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="提示语" :label-width="formLabelWidth" :rules="[{ required: true, message: '请输入提示语' }]"
				prop="prompt">
				<el-input v-model="form.prompt" class="max-w460"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogFormVisible">取 消</el-button>
				<el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
			</div>
		</template>
	</el-dialog>
	<Upload v-if="isUpload" :config="config" :isupload="isUpload" @returnImgs="returnImgsFunc">上传图片
	</Upload>
	<!--选择商品-->
	<Product :spec_type="10" :is_virtual="0" :isproduct="isproduct" :excludeIds="exclude_ids" :islist="false"
		@closeDialog="closeProductFunc">
	</Product>
	<GetCoupon v-if="open_add" :open_add="open_add" :type="1" @closeDialog="closeProductDialogFunc($event)"></GetCoupon>
</template>
<script>
	import Upload from '@/components/file/Upload.vue';
	import Product from "@/components/product/Product.vue";
	import GetCoupon from "@/components/coupon/GetCoupon.vue";
	import {
		verifiyNumberInteger
	} from "@/utils/DateTime.js";
	export default {
		components: {
			Upload,
			Product,
			GetCoupon,
		},
		data() {
			return {
				isUpload: false,
				config: {},
				loading: false,
				/*左边长度*/
				formLabelWidth: "120px",
				/*是否显示*/
				dialogVisible: false,
				form: {
					award_id: "",
					name: "",
					image: "",
					stock: "",
					weight: "",
					prompt: "",
					points: "",
					balance: "",
					product_price: ''
				},
				exclude_ids: [],
				/*是否打开选择商品*/
				isproduct: false,
				open_add: false,
			};
		},
		props: ["model"],
		created() {
			console.log(this.model);
			this.form = this.model;
			this.dialogVisible = true;
		},
		methods: {
			openWeight(value) {
				let m = verifiyNumberInteger(value);
				this.form.weight = m > 100 ? 100 : m;
			},
			/*关闭优惠券*/
			closeProductDialogFunc(e) {
				let self = this;
				self.open_add = e.openDialog;
				if (e.type == "success") {
					self.form.award_id = e.params.coupon_id;
					self.form.name = e.params.name;
				}
			},
			changeType(e) {
				this.form.prizeId = 0;
				this.form.award_id = 0;
				// this.form.name = '';
				// this.form.image = '';
				this.form.points = "";
				this.form.balance = "";
				this.form.product_price = "";
			},
			/*打开上传图片*/
			openUpload: function() {
				this.config = {
					total: 1,
					fileType: "image",
				};
				this.isUpload = true;
			},
			deleteImg(index) {
				this.form.image = "";
			},
			/*上传商品图片*/
			returnImgsFunc(e) {
				if (e != null) {
					let imgs = (this.form.image = e[0].file_path);
					this.form.image = imgs;
				}
				this.isUpload = false;
			},
			/*添加商品*/
			addProduct() {
				this.isproduct = true;
			},
			/*关闭商品*/
			closeProductFunc(e) {
				let self = this;
				self.isproduct = e.openDialog;
				if (e.type == "success") {
					console.log(e);
					self.form.award_id = e.params.product_id;
					self.form.name = e.params.product_name;
					self.form.image = e.params.product_image;
				}
			},
			/*处理*/
			submit() {
				let self = this;
				let form = self.form;
				console.log(form)
				self.$refs.form.validate((valid) => {
					if (valid) {
						this.$emit("closeDialog", {
							type: "success",
							openDialog: false,
							form: form,
						});
					}
				});

			},
			/*关闭弹窗*/
			dialogFormVisible(e) {
				this.$emit("closeDialog", {
					type: "error",
					openDialog: false,
				});
			},
		},
	};
</script>
<style></style>